﻿<!DOCTYPE html>
<html lang="zh">

<head resource>
    <meta charset="utf-8">
    <include file="../inc/meta.inc" />
    <title>公告</title>
</head>

<body>
    <div id="vapp" v-cloak>
        <loading v-if="loading"></loading>
        <template v-else>
            <el-form ref="formData" :model="formData" :rules="rules" @submit.native.prevent label-width="80px">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="基础信息" name="tab01">
                        <el-col :span="24">
                            <el-form-item label="类型" prop="No_Type">
                                <el-radio-group v-model="formData.No_Type">
                                    <el-radio-button :label="1">普通通知</el-radio-button>
                                    <el-radio-button :label="2">弹窗公告</el-radio-button>
                                    <el-radio-button :label="3" v-if="false">短信通知</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <template v-if="formData.No_Type==1 ||formData.No_Type==2">
                            <el-col :span="24">
                                <el-form-item label="标题" prop="No_Ttl">
                                    <el-input v-model="formData.No_Ttl" clearable :style="{width: '100%'}">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="状态" prop="No_IsShow">
                                    <el-switch v-model="formData.No_IsShow" active-text="启用" inactive-text="禁用">
                                    </el-switch>
                                </el-form-item>
                            </el-col>
                        </template>
                        <el-col class="editor_row">
                            <el-form-item label="内容" prop="No_Context" style="height: 100%;">
                                <editor :content="formData.No_Context" model="general" ref="editor" upload="Notice"
                                    :dataid="formData.No_Id" @change="text=>formData.No_Context=text"> </editor>
                            </el-form-item>
                        </el-col>
                        <template v-if="formData.No_Type==3">
                            <el-col :span="24">
                                <el-form-item label="内容" prop="No_Context" style="margin-bottom: 0px;">
                                    <el-input type="textarea" :rows="4" placeholder="请输入内容"
                                        v-model="formData.No_Context" @input="updateDetails">
                                    </el-input>
                                    <div>转义符：
                                        <el-tag>{name}学员名称</el-tag>
                                        <el-tag>{account}学员账号</el-tag>
                                        <el-tag>{org}平台名称</el-tag>
                                        <el-tag>{date}日期</el-tag>
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="实际内容">

                                    输入测试
                                    {{updateDetails()}}
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="测试">
                                    <el-input v-model="testPhone" placeholder="请输入手机号" clearable
                                        :style="{width: '50%'}">
                                    </el-input>
                                    <el-button type="primary" native-type="submit" :loading="loading" plain>
                                        发送测试</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="">
                                    <el-button type="primary" native-type="submit" :loading="loading">
                                        群发通知</el-button>
                                </el-form-item>
                            </el-col>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane label="弹窗公告" name="tab02" v-if="formData.No_Type==2">
                        <el-col :span="24">

                        </el-col>

                        <el-col :span="24">
                            <el-form-item label="响应页面" prop="No_Page">
                                <template>
                                    <el-radio v-model="formData.No_Page" label="mobi_home">手机端首页</el-radio>
                                    <el-radio v-model="formData.No_Page" label="web_home">电脑端首页</el-radio>
                                </template>
                            </el-form-item>

                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="受众范围" prop="No_Range">
                                <el-radio-group v-model="formData.No_Range">
                                    <el-radio :label="1">全部</el-radio>
                                    <el-radio :label="2">未登录</el-radio>
                                    <el-radio :label="3">所有登录学员</el-radio>
                                    <el-radio :label="4">分组学员</el-radio>
                                </el-radio-group>
                                <el-transfer v-model="No_StudentSort" :data="accountSort" v-show="formData.No_Range==4"
                                    :titles="['学员分组', '选定的组']"></el-transfer>
                            </el-form-item>
                        </el-col>

                        <el-col :span="24">
                            <el-form-item label="有效时间">
                                <template>
                                    <el-date-picker v-model="formData.No_StartTime" @change="changeTime" type="date"
                                        placeholder="起始时间" :style="{width: '160px'}">
                                    </el-date-picker>

                                    <el-date-picker v-model="formData.No_EndTime" @change="changeTime" type="date"
                                        placeholder="结束时间" :style="{width: '160px'}">
                                    </el-date-picker>

                                </template>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="" prop="No_OpenCount">
                                <el-tooltip placement="top">
                                    <div slot="content">0次或负值，为无限次</div>
                                    <el-input v-model="formData.No_OpenCount" :style="{width: '220px'}" :maxlength="5">
                                        <template slot="prepend">每天弹出</template>
                                        <template slot="append">次</template>
                                    </el-input>
                                </el-tooltip>
                                <el-tooltip placement="top">
                                    <div slot="content">0秒或负值，不计时间，一直显示</div>
                                    <el-input v-model="formData.No_Timespan" :style="{width: '220px'}" :maxlength="5">

                                        <template slot="prepend">每次</template>
                                        <template slot="append">秒</template>
                                    </el-input>
                                </el-tooltip>
                            </el-form-item>
                        </el-col>

                        <el-col :span="24">
                            <el-form-item label="有效时段" prop="No_Interval" style="margin-bottom: 0px;">

                                <template>
                                    <el-time-picker is-range v-model="interval" range-separator="至"
                                        start-placeholder="开始时间" end-placeholder="结束时间" format="HH:mm"
                                        value-format="HH:mm" placeholder="选择时间范围" style="width: 260px;">
                                    </el-time-picker>
                                    <el-link type="primary" @click="addInterval">添加</el-link>
                                </template>
                                <div style="width: 100%; display: flex;flex-wrap: wrap; justify-content: start;">
                                    <div v-for='(item,index) in No_Interval' v-if="No_Interval.length>0"
                                        style="flex: 0 0 33%;">
                                        {{timeformat(item.start,'HH:mm')}}
                                        至
                                        {{timeformat(item.end,'HH:mm')}} <el-link type="primary"
                                            @click="No_Interval.splice(index, 1)">移除</el-link>
                                    </div>
                                    <div v-if="No_Interval.length==0">
                                        (没有设置时间段，默认为全天显示)
                                    </div>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="图片" style="margin-bottom: 0px;">
                                <upload-img @change="filechange" @load="fileload" :data="formData" size="1024" height="100"
                                    ext="jpg,png,gif">
                                    <template v-if="formData.No_BgImage!='' || upfile!=null">
                                        <img v-if="upfile!=null" :src="upfile.base64" />
                                        <img v-else :src="formData.No_BgImage" />
                                        <el-link type="primary" @click.stop="fileremove">清除图片</el-link>
                                    </template>
                                    <div class="nophoto" v-else>
                                        <el-tooltip content="点击上传图片" placement="right" effect="light">
                                            <icon>&#xe6ea</icon>
                                        </el-tooltip>
                                    </div>
                                </upload-img>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="" prop="No_Width">
                                <el-input v-model.number="imgWidth" :style="{width: '200px'}"
                                    v-on:input="imgWidthChange" :maxlength="5">
                                    <template slot="prepend">宽度</template>
                                    <template slot="append">{{ismoblie ? '%' : 'px'}}</template>
                                </el-input>
                                <el-input v-model.number="imgHeight" :style="{width: '200px'}"
                                    v-on:input="imgHeightChange" :maxlength="5">
                                    <template slot="prepend">高度</template>
                                    <template slot="append">{{ismoblie ? '%' : 'px'}}</template>
                                </el-input>
                                <el-checkbox v-model="scale">等比缩放</el-checkbox>
                            </el-form-item>
                        </el-col>

                        <el-col :span="24">
                            <el-form-item label="链接地址" prop="No_Linkurl">
                                <el-input v-model="formData.No_Linkurl" placeholder="可以为空" clearable
                                    :style="{width: '100%'}">
                                </el-input>
                            </el-form-item>
                        </el-col>

                    </el-tab-pane>
                </el-tabs>
            </el-form>
            <div class="footer">
                <el-button type="primary" native-type="submit" define="enter" :loading="loading" plain @click="btnEnter('formData')">
                    保存
                </el-button>      
                <el-button type="primary" native-type="submit" v-if="id!=''" define="apply" :loading="loading" plain @click="btnApply('formData')">
                    应用
                </el-button>    
                <el-button type='close'>取消</el-button>
            </div>
        </template>
    </div>


</body>

</html>